<template>
    <div class="payMiniapp_page">
        <div class="payMiniapp_container" @click="showPayMiniappDialogSettingHandler">
            <el-icon><Setting /></el-icon>&nbsp;支付小程序配置
        </div>
        <el-dialog v-model="Data.visible" :width="Data.width" :title="Data.title">
            <el-form ref="formRef" :rules="rules" :model="Data" label-width="180px">
                <div v-if="!Data.hadBindAppId">
                    <el-form-item
                        label="AppID(小程序ID)"
                        prop="appId"
                        :rules="{ required: true, message: '小程序AppID不能为空', trigger: ['blur', 'change'] }">
                        <el-input v-model.trim="Data.appId" placeholder="请输入小程序ID" autocomplete="off" />
                    </el-form-item>
                    <el-form-item
                        label="AppSecret(小程序秘钥)"
                        prop="APPSecret"
                        :rules="{ required: true, message: '小程序AppSecret不能为空', trigger: ['blur', 'change'] }">
                        <el-input v-model.trim="Data.APPSecret" placeholder="请输入小程序秘钥" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="">
                        <div class="tip">
                            <div>*仅支持【发布成功】的小程序绑定支付！</div>
                            <div>*请确保小程序主体和支付主体一致！</div>
                        </div>
                    </el-form-item>
                </div>
                <div v-else>
                    <el-form-item label="AppID(小程序ID)" prop="appId" label-width="160px">
                        <div v-if="Data.hadBindAppId">{{ Data.hadBindAppId }}</div>
                    </el-form-item>
                </div>
            </el-form>
            <template #footer>
                <span v-if="Data.hadBindAppId">
                    <el-button type="primary" @click="Data.visible = false"> 关闭 </el-button>
                </span>
                <span v-else class="footer">
                    <el-button type="primary" @click="bindPayHandler"> 绑定宝付支付 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import request from '@/request';
import { ElMessage } from 'element-plus';

const Data = reactive({
    title: '',
    width: '40%',
    visible: false,
    appId: '',
    APPSecret: '',
    // 已绑定的APPID
    hadBindAppId: ''
});

const formRef = ref();

/**
 * 点击支付小程序配置
 */
const showPayMiniappDialogSettingHandler = async () => {
    const { data } = await request('paymentAppIdServ');
    if (data?.appid) {
        Data.title = '查看配置';
        Data.hadBindAppId = data.appid;
    } else {
        Data.title = '配置支付小程序';
        Data.hadBindAppId = '';
        Data.appId = null;
        formRef.value?.resetFields();
    }
    Data.visible = true;
};

/**
 * 绑定宝付支付
 */
const bindPayHandler = () => {
    formRef.value.validate(async valid => {
        if (valid) {
            await request('bindPaymentAppIdServ', { appid: Data.appId, appSecret: Data.APPSecret });
            ElMessage.success('绑定成功！');
            Data.visible = false;
        }
    });
};

/**
 * 重置appSecret
 */
const resetSecret = () => {};
</script>
<style scoped lang="scss">
.payMiniapp_page {
    .payMiniapp_container {
        font-size: 14px;
        font-weight: 400;
        color: #ff6b00;
        display: flex;
        align-items: center;
        margin-left: 36px;
        cursor: pointer;
    }
    :deep(.el-dialog__body) {
        border: none !important;
        .el-form-item__content {
            display: block;
        }
    }
    .reset {
        cursor: not-allowed;
        color: var(--el-color-primary);
    }
    .tip {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 20px;
    }
    .footer {
        display: flex;
        justify-content: space-around;
    }
}
</style>
